<div class="container page-container" id="messages-page">
    <div class="page-header">
        <h2><span class="glyphicon glyphicon-envelope"></span> Message</h2>
    </div>
    <ul class="nav nav-tabs messages-nav">
        <li class="active inbox-nav"><a href="#inbox" data-toggle="tab">Inbox</a></li>
        <li class="sentbox-nav"><a href="#sentbox" data-toggle="tab">Sentbox</a></li>
<!--        <li class="draft-nav"><a href="#draft" data-toggle="tab">Draft</a></li>-->
    </ul>
    <div class="tab-content messages-container">
        <!--Inbox-->
        <div class="tab-pane active" id="inbox">
            <div class="container inbox-filter">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#compose-msg-popup" role="button" data-toggle="modal" class="btn btn-primary" 
                           data-backdrop="static" data-keyboard="false"><span class="glyphicon glyphicon-plus"></span> New Message</a>
                    </div>
                    <div class="col-md2-2">
                        <a href="#delete-inbox-popup" class="btn btn-default btn-delete-inbox hide-element" data-toggle="modal" 
                                title="Delete Inbox Message/s" data-backdrop="static" data-keyboard="false"><span class="glyphicon glyphicon-trash"></span> Delete
                        </a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="inbox-table" class="table table-bordered table-hover inbox-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-inbox"/></th>
                            <th style="width: 20%;">Sender</th>
                            <th>Subject</th>
                            <th style="width: 15%;">Sent Date</th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php if($inbox === FALSE){?>
                    <?php }else{ ?>
                        <?php foreach ($inbox as $item) {?>
                        <tr>
                            <td><input type="checkbox" class="item-inbox-checkbox msg-id" value="<?php echo $item['msg_id'] ?>"/></td>
                            <td><?php echo $item['name'] ?></td>  
                            <td><a href="#view-inbox-msg-popup" class="btn-view-inbox-msg" data-toggle="modal" 
                                   data-backdrop="static" data-keyboard="false"><?php echo $item['subject'] ?></a></td>
                            <td><?php echo $item['date'] ?></td>
                        </tr>
                        <?php } ?>
                    <?php } ?>
                    </tbody>  
                </table>
            </div>
            <!--View Received Message Modal-->
            <div class="modal fade" id="view-inbox-msg-popup" tabindex="-1" role="dialog" aria-labelledby="view-inbox-msg" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="view-inbox-msg">View Message</h4>
                            <div class="form-horizontal" style="margin-top: 1em">
                                <button class="btn btn-primary select-view-msg" disabled>View</button>
                                <button class="btn btn-default select-reply-msg">Reply</button>
                                <button class="btn btn-default select-forward-msg">Forward</button>
                                <button class="btn btn-default select-delete-msg">Delete</button>
                            </div>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="msg_id" class="msg-id" />
                            <div class="view-container">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">From</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="sender" class="col-sm-10 form-control msg-sender" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="subject" class="form-control msg-subject" disabled />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="filename" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control msg-body" name="msg_body" disabled>
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                        <div class="col-sm-10">
                                            <a href="#" class="form-control attachment-file"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="reply-container hide-element">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">To</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="sender" class="col-sm-10 form-control msg-recipient" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="subject" class="form-control msg-subject required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="filename" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control msg-body" style="height: 300px;" name="msg_body">
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                        <div class="form-inline col-sm-10">
                                            <div class="input-group">
                                                <input type="text" class="form-control file-upload" name="file" disabled>
                                                <span class="input-group-btn">
                                                    <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                                </span>
                                            </div>
                                        </div>
                                        <input type="file" name="i-r-userfile" style="display:none;" id="i-r-userfile" class="files-attachment userfile" />
                                    </div>
                                </div>
                            </div>
                            <div class="forward-container hide-element">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label for="recipient" class="col-sm-2 control-label">To</label>
                                        <div class="col-sm-10">
                                            <select class="form-control msg-recipient required-info" name="recipient">
                                                <option class="default-recipient">Recipient</option>
                                                <?php if($recipients===FALSE) { ?>
                                                <?php }else{?>
                                                    <?php foreach ($recipients as $recipient): ?>
                                                        <option value="<?php echo $recipient['coordinator_id']?>">
                                                            <?php echo $recipient['coord_fname'].' '.$recipient['coord_lname']?></option>
                                                    <?php endforeach; ?>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="subject" class="form-control msg-subject required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="filename" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control msg-body" style="height: 300px;" name="msg_body">
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                        <div class="form-inline col-sm-10">
                                            <div class="input-group">
                                                <input type="text" class="form-control file-upload" name="file" disabled>
                                                <span class="input-group-btn">
                                                    <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                                </span>
                                            </div>
                                        </div>
                                        <input type="file" name="i-f-userfile" style="display:none;" id="i-f-userfile" class="files-attachment userfile" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
<!--                            <button type="button" class="btn btn-default btn-save hide-element">Save Draft</button>-->
                            <button type="button" class="btn btn-primary btn-send hide-element">Send</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete Inbox Modal-->
            <div class="modal fade" id="delete-inbox-popup" tabindex="-1" role="dialog" aria-labelledby="delete-inbox" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-inbox">Delete Inbox Messages/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                  </div>
                </div>
            </div>
        </div>
        <!--End of Inbox-->
         <!--Sentbox-->
        <div class="tab-pane" id="sentbox">
            <div class="container sentbox-filter">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#compose-msg-popup" role="button" data-toggle="modal" class="btn btn-primary" 
                           data-backdrop="static" data-keyboard="false"><span class="glyphicon glyphicon-plus"></span> New Message</a>
                    </div>
                    <div class="col-md2-2">
                        <a href="#delete-sentbox-popup" class="btn btn-default btn-delete-sentbox hide-element" data-toggle="modal" 
                                title="Delete Sentbox Message/s" 
                                data-backdrop="static" data-keyboard="false"><span class="glyphicon glyphicon-trash"></span> Delete
                        </a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="sentbox-table" class="table table-bordered sentbox-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-sentbox"/></th>
                            <th style="width: 20%;">Recipient</th>
                            <th>Subject</th>
                            <th style="width: 15%;">Sent Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if($sentbox === FALSE){?>
                        <?php }else{ ?>
                            <?php foreach ($sentbox as $sent) {?>
                            <tr>
                                <td><input type="checkbox" class="item-sentbox-checkbox msg-id" value="<?php echo $sent['msg_id'] ?>"/></td>
                                <td><?php echo $sent['name'] ?></td>  
                                <td><a href="#view-sentbox-msg-popup" class="btn-view-sentbox-msg" data-toggle="modal" 
                                       data-backdrop="static" data-keyboard="false"><?php echo $sent['subject'] ?></a></td>
                                <td><?php echo $sent['date'] ?></td>
                            </tr>
                            <?php } ?>
                        <?php } ?>
                    </tbody>  
                </table>
            </div>
            <!--View Sent Message Modal-->
            <div class="modal fade" id="view-sentbox-msg-popup" tabindex="-1" role="dialog" aria-labelledby="view-sentbox-msg" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="view-sentbox-msg">View Message</h4>
                            <div class="form-horizontal" style="margin-top: 1em">
                                <button class="btn btn-primary select-view-msg" disabled>View</button>
                                <button class="btn btn-default select-forward-msg">Forward</button>
                                <button class="btn btn-default select-delete-msg">Delete</button>
                            </div>
                        </div>
                        <div class="modal-body">
                            <input type="hidden" name="msg_id" class="msg-id" />
                            <div class="view-container">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">To</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="sender" class="col-sm-10 form-control msg-sender" disabled/>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="subject" class="form-control msg-subject" disabled />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="filename" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control msg-body" name="msg_body" disabled>
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                        <div class="col-sm-10">
                                            <a href="#" class="form-control attachment-file"></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="forward-container hide-element">
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <label for="recipient" class="col-sm-2 control-label">To</label>
                                        <div class="col-sm-10">
                                            <select class="form-control msg-recipient required-info" name="recipient">
                                                <option class="default-recipient">Recipient</option>
                                                <?php if($recipients===FALSE) { ?>
                                                <?php }else{?>
                                                    <?php foreach ($recipients as $recipient): ?>
                                                        <option value="<?php echo $recipient['coordinator_id']?>">
                                                            <?php echo $recipient['coord_fname'].' '.$recipient['coord_lname']?></option>
                                                    <?php endforeach; ?>
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                        <div class="col-sm-10">
                                            <input type="text" name="subject" class="form-control msg-subject required" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="filename" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10">
                                            <textarea class="form-control msg-body" style="height: 300px;" name="msg_body">
                                            </textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                        <div class="form-inline col-sm-10">
                                            <div class="input-group">
                                                <input type="text" class="form-control file-upload" name="file" disabled>
                                                <span class="input-group-btn">
                                                    <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                                </span>
                                            </div>
                                        </div>
                                        <input type="file" name="s-f-userfile" style="display:none;" id="s-f-userfile" class="files-attachment userfile" />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="view-delete-sentbox-popup" tabindex="-1" role="dialog" aria-labelledby="view-delete-sentbox" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 class="modal-title" id="view-delete-sentbox">Delete Message</h4>
                                    </div>
                                    <div class="modal-body">
                                        <h4>Are you sure you want to delete the checked items?</h4>
                                        <p><b>Note: </b>This action cannot be undone.</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                                        <button type="button" class="btn btn-primary btn-yes">Yes</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
<!--                            <button type="button" class="btn btn-default btn-save hide-element">Save Draft</button>-->
                            <button type="button" class="btn btn-primary btn-send hide-element">Send</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--Delete Sentbox Modal-->
            <div class="modal fade" id="delete-sentbox-popup" tabindex="-1" role="dialog" aria-labelledby="delete-sentbox" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="delete-sentbox">Delete Sentbox Message/s</h4>
                        </div>
                        <div class="modal-body">
                            <h4>Are you sure you want to delete the checked items?</h4>
                            <p><b>Note: </b>This action cannot be undone.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default btn-no" data-dismiss="modal">No</button>
                            <button type="button" class="btn btn-primary btn-yes">Yes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--End of Sentbox-->
        <!--Draft-->
<!--        <div class="tab-pane" id="draft">
            <div class="container draft-filter">
                <div class="row">
                    <div class="col-md-2">
                        <a href="#compose-msg-popup" role="button" data-toggle="modal" class="btn btn-primary">Compose Message</a>
                    </div>
                    <div class="col-md2-2">
                        <a href="#delete-draft-popup" class="btn btn-default btn-delete-draft hide-element" data-toggle="modal" 
                                title="Delete Draft Message/s"><span class="glyphicon glyphicon-trash"></span> Delete
                        </a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="draft-table" class="table table-bordered draft-list">
                    <thead>  
                        <tr>  
                            <th style="width: 1%;"><input type="checkbox" class="check-all-draft"/></th>
                            <th style="width: 20%;">Recipient</th>
                            <th>Subject</th>
                        </tr>
                    </thead>
                    <tbody>
                        < ?php if($drafts === FALSE){?>
                        < ?php }else{ ?>
                            < ?php foreach ($drafts as $draft) {?>
                            <tr>
                                <td><input type="checkbox" class="item-draft-checkbox msg-id" value="< ?php echo $draft['msg_id'] ?>"/></td>
                                <td>< ?php echo $draft['name'] ?></td>  
                                <td><a href="#view-draft-msg-popup" class="btn-view-draft-msg" data-toggle="modal">< ?php echo $draft['subject'] ?></a></td>
                            </tr>
                            < ?php } ?>
                        < ?php } ?>
                    </tbody>  
                </table>
            </div>
        </div>
        End of Draft
        View Draft Message Modal
        <div class="modal fade" id="view-draft-msg-popup" tabindex="-1" role="dialog" aria-labelledby="view-draft-msg" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="view-draft-msg">Draft Message</h4>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="msg_id" class="msg-id" />
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label for="recipient" class="col-sm-2 control-label">To</label>
                                <div class="col-sm-10">
                                    <select class="form-control msg-recipient required-info" name="recipient">
                                        <option class="default-recipient">Recipient</option>
                                        < ?php if($recipients===FALSE) { ?>
                                        < ?php }else{?>
                                            < ?php foreach ($recipients as $recipient): ?>
                                                <option value="< ?php echo $recipient['coordinator_id']?>">
                                                    < ?php echo $recipient['fname'].' '.$recipient['lname']?></option>
                                            < ?php endforeach; ?>
                                        < ?php } ?>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                                <div class="col-sm-10">
                                    <input type="text" name="subject" class="form-control msg-subject required" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="filename" class="col-sm-2 control-label"></label>
                                <div class="col-sm-10">
                                    <textarea class="form-control msg-body" style="height: 300px;" name="msg_body">
                                    </textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                                <div class="form-inline col-sm-10">
                                    <div class="input-group">
                                        <input type="text" class="form-control file-upload" name="file" disabled>
                                        <span class="input-group-btn">
                                            <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                        </span>
                                    </div>
                                </div>
                                <input type="file" name="s-f-userfile" style="display:none;" id="s-f-userfile" class="files-attachment userfile" />
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-default btn-save">Save Draft</button>
                        <button type="button" class="btn btn-primary btn-send">Send</button>
                    </div>
                </div>
            </div>
        </div-->
    </div>
    <!--Compose Message Modal-->
    <div class="modal fade" id="compose-msg-popup" tabindex="-1" role="dialog" aria-labelledby="compose-msg" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="compose-msg">Compose Message</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label for="recipient" class="col-sm-2 control-label">To</label>
                            <div class="col-sm-10">
                                <select class="form-control msg-recipient required-info" name="recipient">
                                    <option class="default-recipient">Recipient</option>
                                    <?php if($recipients===FALSE) { ?>
                                    <?php }else{?>
                                        <?php foreach ($recipients as $recipient): ?>
                                            <option value="<?php echo $recipient['coordinator_id']?>">
                                                <?php echo $recipient['coord_fname'].' '.$recipient['coord_lname']?></option>
                                        <?php endforeach; ?>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="n-subject" class="col-sm-2 control-label">Subject</label>
                            <div class="col-sm-10">
                                <input type="text" name="subject" class="form-control msg-subject required" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="filename" class="col-sm-2 control-label"></label>
                            <div class="col-sm-10">
                                <textarea class="form-control msg-body" style="height: 300px;" name="msg_body">
                                </textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="attachment" class="col-sm-2 control-label">Attachment</label>
                            <div class="form-inline col-sm-10">
                                <div class="input-group">
                                    <input type="text" class="form-control file-upload" name="file" disabled>
                                    <span class="input-group-btn">
                                        <a class="btn btn-default btn-browse-file" type="button" title="Browse Files"><span class="glyphicon glyphicon-paperclip"></span></a>
                                    </span>
                                </div>
                            </div>
                            <input type="file" name="c-userfile" style="display:none;" id="c-userfile" class="files-attachment userfile" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Cancel</button>
<!--                    <button type="button" class="btn btn-default btn-save">Save Draft</button>-->
                    <button type="button" class="btn btn-primary btn-send">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>